<template>
    <ul 
    v-show="visible"
    :style="{left:left+'px',top:top+'px'}"
    class="contextmenu">
        <li>粘贴</li>
        <li @click="refresh">刷新</li>
        <li>新建文档</li>
        <li @click="createFolder">新建文件夹</li>
        <!-- <li>个性化设置</li> -->
    </ul>

</template>

<script>
export default {
  name: 'desktopMenu',
  components: {},
  props: {
    visible:{
        type:Boolean,
        default:false
    },
    left:{
        type:Number,
        default:0
    },
    top:{
        type:Number,
        default:0
    }
  },
  emits: ['refresh','createFolder'],
  setup(props,context) {
      function refresh(){
          context.emit('refresh')
      }

      const methods = {
        refresh(){
            context.emit('refresh')
        },
        createFolder(){
            context.emit('createFolder')
        }
      }

      return {
          ...methods
      }
  }
}
</script>

<style lang='scss' scoped>
.contextmenu {
    width: 200px;
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    overflow: hidden;
    box-shadow: 0 2px 5px 0 $grey_2;

    li {
        margin: 0;
        padding: 10px 16px;
        cursor: pointer;

        &:hover {
            background: #eee;
        }
    }
}
  
</style>

